<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta http-equiv="Access-Control-Allow-Origin" content="*">
		<meta http-equiv="content-security-policy">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title></title>
		<script src="js/mui.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<style>
			.title {
				margin: 20px 15px 10px;
				color: #6d6d72;
				font-size: 15px;
			}
			
			.oa-contact-cell.mui-table .mui-table-cell {
				padding: 11px 0;
				vertical-align: middle;
			}
			
			.oa-contact-cell {
				position: relative;
				margin: -11px 0;
			}
			
			.oa-contact-avatar {
				width: 75px;
			}
			
			.oa-contact-avatar img {
				border-radius: 50%;
			}
			
			.oa-contact-content {
				width: 100%;
			}
			
			.oa-contact-name {
				margin-right: 20px;
			}
			
			.oa-contact-name,
			oa-contact-position {
				float: left;
			}
		</style>
		<script type="text/javascript" charset="utf-8">
			mui.init();
		</script>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a id="menu" class="mui-action-menu mui-icon mui-icon-bars mui-pull-right" href="#topPopover"></a>
			<h1 id="title" class="mui-title">闪读看书</h1>
		</header>

		<nav class="mui-bar mui-bar-tab">
			<a id="defaultTab" class="mui-tab-item mui-active" href="pullFirst.html">
				<span class="mui-icon mui-icon-eye"></span>
				<span class="mui-tab-label">追更</span>
			</a>
			<a class="mui-tab-item" href="collection.html">
				<span class="mui-icon mui-icon-flag"></span>
				<span class="mui-tab-label">排行榜</span>
			</a>
			<a class="mui-tab-item" href="searchN.html">
				<span class="mui-icon mui-icon-search"></span>
				<span class="mui-tab-label">搜索</span>
			</a>
			<a class="mui-tab-item" href="setting.html">
				<span class="mui-icon mui-icon-gear"><span id="setMessage" class="mui-badge" style="display: none;">1</span></span>
				<span class="mui-tab-label">设置</span>
			</a>
		</nav>

	</body>
	<script src="js/mui.min.js"></script>
	<script>
		//启用双击监听
		mui.init({
			gestureConfig: {
				doubletap: true
			},
		});

		var subpages = ['pullFirst.html', 'collection.html', 'searchN.html', 'setting.html'];
		var subpage_style = {
			top: '45px',
			bottom: '51px'
		};
		var aniShow = {};

		//创建子页面，首个选项卡页面显示，其它均隐藏；
		mui.plusReady(function() {
			var self = plus.webview.currentWebview();
			for(var i = 0; i < 4; i++) {
				var temp = {};
				var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);
				if(i > 0) {
					sub.hide();
				} else {
					temp[subpages[i]] = "true";
					mui.extend(aniShow, temp);
				}
				self.append(sub);
			}
			loadNewMessage();
		});
		//当前激活选项
		var activeTab = subpages[0];
		var title = document.getElementById("title");
		//选项卡点击事件
		mui('.mui-bar-tab').on('tap', 'a', function(e) {
			var targetTab = this.getAttribute('href');
			if(targetTab == activeTab) {
				return;
			}
			//显示目标选项卡
			//若为iOS平台或非首次显示，则直接显示
			if(mui.os.ios || aniShow[targetTab]) {
				plus.webview.show(targetTab);
			} else {
				//否则，使用fade-in动画，且保存变量
				var temp = {};
				temp[targetTab] = "true";
				mui.extend(aniShow, temp);
				plus.webview.show(targetTab, "fade-in", 300);

			}
			//隐藏当前;
			plus.webview.hide(activeTab);
			//更改当前活跃的选项卡
			activeTab = targetTab;

			console.log("loadNewMessage");
			loadNewMessage();
		});
		//自定义事件，模拟点击“首页选项卡”
		document.addEventListener('gohome', function() {
			var defaultTab = document.getElementById("defaultTab");
			//模拟首页点击
			mui.trigger(defaultTab, 'tap');
			//切换选项卡高亮
			var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active");
			if(defaultTab !== current) {
				current.classList.remove('mui-active');
				defaultTab.classList.add('mui-active');
			}

		});

		function loadNewMessage() {
			mui.ajax('http://.../Service/?novelid=0&chapterId=0&state=10', {
				data: 'json',
				dataType: 'get',
				timeout: 100000,
				success: function(data) {
					var name = document.getElementById('setMessage');
					if(data == null) {
						name.style.display = "none";
						refrushMainView(0);
						return;
					} else if(data == "") {
						name.style.display = "none";
						localStorage.setItem("readMessage", "");
						refrushMainView(0);
					} else {
						data = JSON.parse(data);

						var count = Object.keys(data).length;
						console.log(count);
						var readmessageStr = localStorage.getItem("readMessage");
						console.log("readmessageStr" + readmessageStr);

						var hasValue = 0;
						if(readmessageStr == null) {
							hasValue = 0;
						} else if(readmessageStr == "") {
							hasValue = 0;
						} else {
							var list = readmessageStr.split('_');

							for(i = 0; i < list.length; i++) {
								for(j = 0; j < count; j++) {
									if(list[i] == data[j].Id) {
										hasValue++;
									}
								}
							}
						}
						count = count - hasValue;
						console.log("c" + count);
						if(count <= 0) {
							name.style.display = "none";
							return;
						} else {
							name.innerText = count;
							name.style.display = "block";
						}

					}

				},
				error: function() {
					console.log('error');
				}
			});
		}
	</script>

</html>
